@model AddReusablePartViewModel
@{
    int i = 0;
}
<h1>@T["Add Named Part To \"{0}\"", Model.Type.DisplayName]</h1>

<form asp-action="AddReusablePartTo">
    @Html.ValidationSummary()
    <div class="form-group">

        @if (Model.PartSelections.Any())
        {
            <div class="form-group">
                <label for="DisplayName">@T["Display Name"]</label>
                <input asp-for="DisplayName" class="form-control" autofocus />
                <span class="hint">@T["Name of the reusable part as it will be displayed in screens."]</span>
            </div>

            <div class="form-group">
                <label for="Name">@T["Technical Name"]</label>
                <input asp-for="Name" class="form-control" />
                <span class="hint">@T["Technical name of the reusable part."]</span>
            </div>

            <div class="form-group">
                <label for="Description">@T["Description"]</label>
                <input asp-for="Description" class="form-control" />
                <span class="hint">@T["Description of the reusable part."]</span>
            </div>

            <ul class="list-group">
                @foreach (var partSelection in Model.PartSelections)
                {
                    <li class="list-group-item">
                        <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" asp-for="SelectedPartName" id="@Html.IdFor(m => m.PartSelections[i].PartName)" value="@Model.PartSelections[i].PartName">
                            <label class="custom-control-label" asp-for="PartSelections[i].PartName">@partSelection.PartDisplayName</label>
                            @if (!String.IsNullOrEmpty(partSelection.PartDescription))
                            {
                                <span class="hint">— @partSelection.PartDescription</span>
                            }
                        </div>
                    </li>
                    i++;
                }
            </ul>
        }
        else
        {
            <p class="alert alert-warning">@T["There are no available named parts."]</p>
        }
    </div>
    <div class="form-group">
        @if (Model.PartSelections.Any())
        {
            <button class="btn btn-primary" type="submit">@T["Save"]</button>
        }
        <a asp-route-action="Edit" asp-route-id="@Model.Type.Name" class="btn btn-secondary">@T["Cancel"]</a>
    </div>
</form>

<script at="Foot" type="text/javascript">
//<![CDATA[
    $(function(){
        var $name = $("#@Html.IdFor(m => m.Name)");
        var $displayName = $("#@Html.IdFor(m => m.DisplayName)");

        var nameAltered;
        $name.keypress(function() {
            nameAltered = true;
        });

        var compute = function() {
            // stop processing automatically if altered by the user
            if(nameAltered) {
                return true;
            }

            $name.val(getTechnicalName($displayName.val()));
        };

        $displayName.keyup(compute);
        $displayName.blur(compute);
    })
//]]>
</script>
